import  React ,{Component} from "react"
import '../../css/car/car.css'
import { connect } from 'react-redux';
 class  Car extends  Component{
    constructor(props){
        super(props)
        this.state={
            all_price:0
        }

    }
     componentWillReceiveProps(){
        this.getprcie()
    }
     getprcie(){
         var that=this
         var num=0
         this.props.msg.forEach(function(v,i){
             num+=v.price*v.count
             that.setState({
                 all_price:num
             })
         })
     }
     sup(res){
            const id=res.target.getAttribute("data-id")
         this.props.msg.forEach(function(v,i){
             if(v.id==id){
                v.count++
             }
         })
         this.getprcie()
     }
     sub(res){
         const id=res.target.getAttribute("data-id")
         this.props.msg.forEach(function(v,i){
             if(v.id==id){
                 if(v.count>0){
                     v.count--
                 }
             }
         })
         this.getprcie()
     }
    render(){
        return (

            <div className="car_box">
                {
                this.state.all_price==0?
                            <p>快去购物吧</p>
                :
                    this.props.msg.map(function (v, i) {
                          if(v.count>0){
                          return(
                          <div className="car_list" key={i}>
                          <div className={"left_car "+v.id}></div>
                          <div className="right_car">
                          <div>
                          <span data-id={v.id} onClick={this.sub.bind(this)}>-</span>
                          <div className="num_box">{v.count}</div>
                          <span data-id={v.id} onClick={this.sup.bind(this)}>+</span>
                          </div>
                          </div>
                          </div>
                          )
                      }else{
                          return
                      }

                    },this)
                }


                <p>总价:￥{this.state.all_price}</p>
            </div>
         )
        }


}
export  default  connect(store=>store)(Car)